<template>
  <div class="timing">
    <div class="dialogItems">
      <div v-loading="loadingV1">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" class="demo-ruleForm autoClass">
          <el-form-item label="kafka Cluster" prop=""  style="width: 42%;">
            <el-input disabled v-model="dataInfo.clusterName" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="Topic Name" prop=""  style="width: 42%;">
            <el-input disabled v-model="dataInfo.topicName" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="" style="width:16%;"  label-width="10px">
            <el-button type="primary" :disabled="isDisable" plain @click="sendForm('ruleForm')">发送</el-button>
            <el-button plain @click="resetFormSend('ruleForm')">清除</el-button>
          </el-form-item>
          <el-form-item label="key" prop="key" style="width: 100%;">
            <el-input v-model="ruleForm['key']" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="value" prop="value"  style="width: 100%;">
            <!-- <el-input v-model="ruleForm['value']" clearable placeholder="" /> -->
            <vueJsonEditor 
            class="myVueJsonEditor" 
            :showBtns="false"
            mode="code"
            lang = 'zh'
            v-model="ruleForm['value']" 
            @has-error="jsonchange" 
            @json-change = "jsonchange"/>
            <p v-if="isDisable" style="color: red;">格式有误</p>
          </el-form-item>
         
        </el-form>
      </div>
      <div style="max-height:350px;min-height:200px;overflow: scroll;margin-left: 110px;border-radius: 4px;">
        <pre style="white-space:pre-wrap;">{{ resOutInfo }}</pre> 
      </div>
    </div>
  </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'
import {  topicsendDataToTopic } from '@/api/zt/index'
import experiment from '@/mixins/experiment'

import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: {
    quillEditor,vueJsonEditor
  },
  mixins: [experiment],
  props: {
    dataInfo: {
      type: Object,
      require: true,
      default: () => {
        return {}
      }
    },
    clusterId:{
      type: String,
      require: true,
      default: () => {
        return ''
      }
    }
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入value'));
        } else {
          if (this.ruleForm.value !== '') {
            // this.$refs.ruleForm.validateField('checkPass');
            callback();
          }
          callback();
        }
      };
    return {
      loadingV1:false,
      resOutInfo:null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      rules: {
        key: [
            { required: true, message: '请输入key', trigger: 'change' }
        ],
        value: [
            { required: true, validator: validatePass2, trigger: 'change' }
        ]
      },
      dialogTableVisible: false,
      ruleForm: {
        'clusterID': '',
        'key': '',
        'topicName': '',
        'value': {}
      }
    }
  },
  created() {
   
  },
  mounted() {
    this.$nextTick(() => {
      this.ruleForm.topicName = this.dataInfo.topicName
      this.ruleForm.clusterID = this.dataInfo.cluster
    })
  },
  methods: { 
    resetFormSend(){
      this.ruleForm['key'] = ''
      this.ruleForm['value'] = {}
      this.resOutInfo = null
    },
    sendForm(v) { 
      this.$refs[v].validate((valid) => {
          if (valid) {
            this.loadingV1 = true
            let p = JSON.parse(JSON.stringify(this.ruleForm))
            p.value = JSON.stringify(p.value)
            delete p.clusterName
            topicsendDataToTopic(p).then(res => {
              this.resOutInfo = res.data||[]
            }).finally(()=>{
              this.loadingV1 = false
            })
          } else {
            return false;
          }
        });
       
    }
  }
}
</script>

    <style lang="scss" scoped>
@import "~@/assets/styles/auto.scss";
:deep(.myVueJsonEditor){
  height:200px;
  >.jsoneditor-vue{
    height:100%;
    .jsoneditor-outer{
      margin:0;
      padding:0;
    }
  }
}
    .dialogItems{
      // display: flex;
      // flex-direction: row;
      // justify-content: space-between;
    }
    .dialogItems>div{
      // width: 48%;
    }
    .dialogItems>div:nth-child(2){
      background: #002b36;
      color: #e5e5e5;
      padding: 8px;
      box-sizing: border-box;
    }
    .autoInput{
      display: inline-block;
      width: 70%;
    }
    .infoTitle{
      border-bottom:1px solid #e5e5e5;
      margin-bottom: 30px;
      position: relative;
    }
    .infoTitle>span{
      position: absolute;
      left: 20px;
      background: #fff;
      width:80px;
      top:-15px;
      height:30px;
      text-align: center;
      line-height: 30px;
    }
      .el-select{
        width:100%;
      }
      .timing{
        background:#fff;
        padding:20px;
      }
  .autoClass{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content: space-between;
    .el-form-item{
      width: 50%;
    }
  }
    </style>
